<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Ch03 html</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>dart:html tests</h1>
  
    <input type="text">A text input field.</input>
    <input type="text">Another text input field.</input>

    <p id="an-id">
      This is <span class="a-class">text</span>.
      And here is some
      <a id="example" href="http://example.com">link text</a>.
    </p>

    <div id="id">
      <p class="class"> FIND THIS P </p>
      <p class="class"> AND THIS P </p>
      <p> but not this p </p>
      <div class="class">
        and not this div
      </div>
    </div>

    <!-- In HTML: -->
    <p>
      <span class="os linux">Words for Linux</span>
      <span class="os mac">Words for Mac</span>
      <span class="os win">Words for Windows</span>
    </p>

    <div id="attribute-test">
      <p id="shy">Sometimes visible, sometimes not.</p>
    </div>

    <div id="fun-with-nodes">
      <div id="inputs">
        Inputs go here
      </div>
      <div id="status">
        Status goes here
      </div>
      <div id="expendable">
        Some expendable text
      </div>
    </div>

    <div id="fun-with-css">
      <div id="message">
        This is a message
      </div>
    </div>

    <div id="handle-events">
      <button id="submitInfo"> Submit or else </button>
    </div>


    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>
